<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
User: WGSpring
Date: 2018/9/26
Time: 9:45
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title  -->
    <title>所有照片</title>

    <!-- Core Style CSS -->
    <link rel="stylesheet" href="../../css/core-style.css">

    <!-- Responsive CSS -->
    <link href="../../css/responsive.css" rel="stylesheet">


</head>
<body>
<!-- Preloader -->
<div id="preloader">
    <div class="showbox">
        <div class="loader">
            <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2"
                        stroke-miterlimit="10"></circle>
            </svg>
        </div>
    </div>
    <div class="questions-area text-center">
        <p>不要着急哦~~</p>
        <ul>
            <li>咦~我的芒果怎么掉了</li>
            <li>遇见你，我一生的幸运</li>
            <li>宁可死别，绝不生离</li>
            <li>我有三件东西最宝贵，太阳、月亮、你</li>
            <li>白天有太阳、晚上有月亮、一生有你</li>
        </ul>
    </div>
</div>

<!-- Gradient Background Overlay -->
<div class="gradient-background-overlay"></div>

<!-- ***** Welcome Area Start ***** -->
<section class="welcome-area">
    <div class="carousel h-100 slide" data-ride="carousel" id="welcomeSlider">
        <!-- Carousel Inner -->
        <div class="carousel-inner h-100">
            <div class="carousel-item h-100 bg-img active"
                 style="background-image: url(${pageContext.request.contextPath}/uploads/pic/${files[0].url});">
                <div class="carousel-content h-100">
                    <div class="slide-text">
                        <span>1.</span>
                        <h2 class="time"> ${files[0].time}</h2>
                    </div>
                </div>
            </div>
            <c:forEach items="${files}" var="file" begin="1" varStatus="varStatus">
                <div class="carousel-item h-100 bg-img"
                     style="background-image: url(${pageContext.request.contextPath}/uploads/pic/${file.url});">
                    <div class="carousel-content h-100">
                        <div class="slide-text">
                            <span>${varStatus.index+1}.</span>
                            <h2 class="time"> ${file.time}</h2>
                        </div>
                    </div>
                </div>
            </c:forEach>

            <%--示例--%>
            <%--<div class="carousel-item h-100 bg-img active" style="background-image: url(img/bg-img/1.jpg);">--%>
            <%--<div class="carousel-content h-100">--%>
            <%--<div class="slide-text">--%>
            <%--<span>01.</span>--%>
            <%--<h2> Believe you can fly</h2>--%>
            <%--</div>--%>
            <%--</div>--%>
            <%--</div>--%>
        </div>
        <!-- Carousel Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#welcomeSlider" data-slide-to="0" class="bg-img active"
                style="background-image: url(${pageContext.request.contextPath}/uploads/pic/${files[0].url});"></li>
            <c:forEach items="${files}" var="file" begin="1" varStatus="varStatus">
                <li data-target="#welcomeSlider" data-slide-to="${varStatus.index}" class="bg-img"
                    style="background-image: url(${pageContext.request.contextPath}/uploads/pic/${file.url});"></li>
            </c:forEach>
            <%--示例--%>
            <%--<li data-target="#welcomeSlider" data-slide-to="0" class="active bg-img" style="background-image: url(/img/bg-img/1.jpg);"></li>--%>
        </ol>
    </div>
</section>
<!-- ***** Welcome Area End ***** -->

<!-- jQuery (Necessary for All JavaScript Plugins) -->
<script src="../../js/jquery.js"></script>
<!-- Popper js -->
<script src="../../js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="../../js/bootstrap.min.js"></script>
<!-- Plugins js -->
<script src="../../js/plugins.js"></script>
<!-- Active js -->
<script src="../../js/active.js"></script>
<script type="text/javascript" src="../../js/myTimeConvert.js"></script>

<script>
    $(".time").each(function () {
        var time = $(this).text();
        time = timeFormat(parseInt(time));
        $(this).text(time);
    })
</script>

</body>

</html>